<template>
  <div style="width: 100%; height: 100%" class="test">
    <!-- <div  style="width: 400px; height: 400px"> 
      <dv-chart-ring fit :data="data" :settings="{}" :extend="{}"></dv-chart-ring>
    </div>         -->
  <dv-page target="parent" fit>
    <dv-box style="border:1px solid red" layout :gap="20" left="20px" top="20px" height="calc(100% - 40px)" width="80%">
    
      <dv-box class="inner" width="100%" :weight="1"> 
        <dv-chart-bar fit :data="data" debug :settings="setting"></dv-chart-bar>
        <!-- :settings="{}" :extend="{}"  -->
      </dv-box>
    </dv-box> 
    <button @click="test">test</button>
  </dv-page>
<!--  -->
  <!-- <button @click="test">test / {{zIndex}}</button> -->
  </div> 
    
</template>
<script setup lang="ts" >
import { ref, reactive } from 'vue';
// import 'echarts/lib/chart/bar'; 
import {DvPage, DvChartBar, DvBox} from '$comp/index';
// console.log(DvChartBar)
 
const data = ref({
  columns: ['星期', '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
  rows: [
      ['周一', 320, 302, 301, 334, 390, 330, 320],
      ['周二', 120, 132, 101, 134, 90, 230, 210],
      ['周三', 220, 182, 191, 234, 290, 330, 310],
      ['周四', 150, 212, 201, 154, 190, 330, 410],
      ['周五', 320, 132, 401, 334, 290, 330, 320]
  ]
})

const setting = ref({
  gradient: false, 
  direction: 'y', 
  stack: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
  rank: {
    direction: 'asc',
  }
})  
const test = () => {  
  setting.value = {}
  setTimeout(() => {
    setting.value = {
      gradient: false, 
      direction: 'y', 
      stack: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
      rank: {
        direction: 'desc',
      }
    }
  }, 300)  
  
}


  // const settings = ref({ })
  

  // const test = () => {
  //   settings.value = {
  //       direction: 'x'
  //     }
  // }
</script>
<style lang="scss" scoped>.test{
  box-sizing: border-box;
  overflow: hidden;
  // border: 5px solid red;
   .dv-box.inner {
  //  background: rgb(68, 107, 226, 0.4);
  //  padding:20px;
   font-size:20px;
   text-align: center;
  }
 }
</style>
